import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/device_const.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/date_mode.dart';
import 'package:share_fit/app/controllers/device/remind/picker/pickers.dart';
import 'package:share_fit/app/controllers/device/remind/picker/style/picker_style.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';
import 'package:sprintf/sprintf.dart';

import 'time_slot_logic.dart';

class TimeSlotPage extends StatelessWidget {
  TimeSlotPage({super.key});

  final logic = Get.put(TimeSlotLogic());
  final state = Get.find<TimeSlotLogic>().state;

  @override
  Widget build(BuildContext context) {
    state.startTime.value = Get.arguments[DeviceConst.keyStartTime];
    state.endTime.value = Get.arguments[DeviceConst.keyEndTime];

    return PopScope(
        canPop: false,
        onPopInvoked: (didPop) => (logic.onDidPop(didPop)),
        child: Scaffold(
          backgroundColor: ColorConst.mainBgColor,
          appBar: AppBar(
            title: Text(LocaleKeys.settings_time_slot.ts),
            centerTitle: true,
            leading: BackBtnIcon(onTap: () => Get.back())
          ),
          body: Padding(
            padding: EdgeInsets.only(left: 40.w, top: 80.h, right: 40.w),
            child: ListView(
              children: [
                Container(
                  height: 247.h,
                  padding: EdgeInsets.only(left: 59.w, top: 10.h, right: 36.w),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Column(
                    children: [
                      Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              LocaleKeys.settings_time_slot.ts,
                              style: TextStyle(
                                  fontSize: 42.sp,
                                  color: ColorConst.primaryFontColor),
                            ),
                            Expanded(child: Container()),
                            Transform.scale(
                              scale: 0.7,
                              child: Obx(() => CupertinoSwitch(
                                  value: state.isTimeSlotEnable.value,
                                  activeColor: ColorConst.accentColor,
                                  // materialTapTargetSize: MaterialTapTargetSize.padded,
                                  onChanged: (value) {
                                    logic.setTimeSlotEnable(value);
                                  })),
                            )
                          ]),
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text(
                          LocaleKeys.settings_spo2_time_enable_tips.ts,
                          style: TextStyle(
                              fontSize: 36.sp,
                              color: ColorConst.secondaryFontColor),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 40.h),
                Container(
                  height: 350.h,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      InkWell(
                        child: Container(
                          padding: EdgeInsets.only(left: 59.w, right: 36.w),
                          alignment: Alignment.centerLeft,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                LocaleKeys.settings_start_time.ts,
                                style: TextStyle(
                                    fontSize: 42.sp,
                                    color: ColorConst.primaryFontColor),
                              ),
                              Expanded(child: Container()),
                              Obx(() => Text(
                                    sprintf(
                                        LocaleKeys
                                            .settings_start_time_morning.ts,
                                        [state.startTime.value]),
                                    style: TextStyle(
                                        fontSize: 42.sp,
                                        color: ColorConst.primaryFontColor),
                                  )),
                              SizedBox(width: 40.w),
                              const Icon(
                                Icons.arrow_forward_ios,
                                size: 14,
                              ),
                            ],
                          ),
                        ),
                        onTap: () {
                          _showTimePicker(context,
                              LocaleKeys.settings_start_time.ts, DateMode.HM);
                        },
                      ),
                      Container(
                        width: double.infinity,
                        height: 1.h,
                        decoration: const BoxDecoration(
                          color: Colors.grey,
                        ),
                      ),
                      InkWell(
                        child: Container(
                          padding: EdgeInsets.only(left: 59.w, right: 36.w),
                          alignment: Alignment.centerLeft,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                LocaleKeys.settings_end_time.ts,
                                style: TextStyle(
                                    fontSize: 42.sp,
                                    color: ColorConst.primaryFontColor),
                              ),
                              Expanded(child: Container()),
                              Obx(() => Text(
                                    sprintf(
                                        LocaleKeys
                                            .settings_end_time_afternoon.ts,
                                        [state.endTime.value]),
                                    style: TextStyle(
                                        fontSize: 42.sp,
                                        color: ColorConst.primaryFontColor),
                                  )),
                              SizedBox(width: 40.w),
                              const Icon(
                                Icons.arrow_forward_ios,
                                size: 14,
                              ),
                            ],
                          ),
                        ),
                        onTap: () {
                          _showTimePicker(context,
                              LocaleKeys.settings_end_time.ts, DateMode.HM);
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ));
  }

  void _showTimePicker(BuildContext context, String title, DateMode dateMode) {
    var pickerStyle = PickerStyle(
      cancelButton: _bottomButton(LocaleKeys.person_choice_cancel.ts),
      commitButton: _bottomButton(LocaleKeys.person_choice_submit.ts),
      headDecoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), topRight: Radius.circular(10))),
      title: Center(
          child: Text(
        title,
        style: TextStyle(color: ColorConst.btnFontColor, fontSize: 54.sp),
      )),
      textColor: ColorConst.btnFontColor,
    );

    Pickers.showDatePicker(
      context,
      mode: dateMode,
      pickerStyle: pickerStyle,
      onConfirm: (p) {
        var hour = p.hour!;
        if (hour > 12) {
          hour -= 12;
        }
        if (title == LocaleKeys.settings_start_time.ts) {
          logic.setStartTime('$hour:${p.minute}');
        } else {
          logic.setEndTime('$hour:${p.minute}');
        }
        Navigator.pop(context);
      },
    );
  }

  Widget _bottomButton(String text) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 12, right: 22),
      child: Text(text,
          style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp)),
    );
  }
}
